<script setup>
  import { useI18n } from 'vue-i18n'

  import { MoreHorizFilled, RefreshOutlined, ChatBubbleOutlineFilled, AddFilled, EditOutlined, DeleteOutlineFilled, DeleteSweepOutlined, PersonOutlineFilled, LanguageFilled, LogOutFilled } from '@vicons/material'
  import { Icon } from '@vicons/utils'
  import useChats from '@/stores/chats'
  import useUserStore from '@/stores/user'
  const { user, logout } = useUserStore()
  const chats = useChats()

  const showMoreUserMenu = ref(false)

  function toggleMoreUserMenu() {
    showMoreUserMenu.value = !showMoreUserMenu.value
  }

  function refresh() {
    location.reload()
  }

  function clear() {
    chats.clear()
    toggleMoreUserMenu()
  }

  function loginout() {
    console.log('logout')
    logout()
  }


  const { locale } = useI18n()
  const langName = computed(() => locale.value === 'zh' ? 'English' : '中文')

  function changeLang(lang = 'en') {
    locale.value = lang
    localStorage.setItem('lang', lang)
  }
</script>

<template>
  <nav class="flex flex-col w-full h-full p-2 overflow-hidden">
    <div class="flex justify-center p-2 mb-2">
      <img src="/logo2_inverse_sm.png" class="object-contain w-auto h-6" />
    </div>

    <div class="flex items-center gap-3 p-3 text-sm text-white border rounded-md cursor-pointer border-white/20 hover:bg-gray-500/10" @click="chats.newChat">
      <Icon size="18">
        <AddFilled />
      </Icon>
      {{$t('sideBar.newChat')}}
    </div>


    <div class="flex-1 my-2 space-y-1 overflow-y-auto text-sm text-white ">
      <div class="flex items-center gap-3 p-3 text-sm text-white break-all rounded-md cursor-pointer hover:bg-gray-500/10" v-for="d, i in chats.chats" :key="i"
        @click="chats.selectChat(d, i)" :class="[chats.index == i ? 'bg-gray-500/10' : '']">
        <Icon size="18" class="text-white/70">
          <ChatBubbleOutlineFilled />
        </Icon>

        <div class="flex-1 overflow-hidden line-clamp-1">
          {{d.messages[0]?.content || $t('sideBar.newChat')}}
        </div>

        <!-- <Icon size="18">
          <EditOutlined />
        </Icon> -->
        <Icon size="18" class="text-white/70 hover:text-white" @click.stop="chats.del(d, i)">
          <DeleteOutlineFilled />
        </Icon>
      </div>
    </div>

    <div class="relative py-2 border-t border-white/20">

      <div class="flex items-center p-2 transition rounded-md hover:cursor-pointer hover:bg-slate-700" @click="toggleMoreUserMenu">
        <span class="w-6 h-6 bg-slate-500 rounded mr-2 flex items-center justify-center text-[10px] overflow-hidden whitespace-nowrap text-slate-300 ">
          <!-- {{user ? user.username.slice(0, 3) : '游客'}} -->
          <Icon size="18">
            <PersonOutlineFilled />
          </Icon>
        </span>
        <div class="flex-1 text-sm select-none text-slate-400 line-clamp-1">
          {{user ? user.username : $t('sideBar.username')}}
        </div>

        <Icon size="20" class="text-slate-500">
          <MoreHorizFilled />
        </Icon>
      </div>

      <!-- more submenu -->

      <Transition name="slide-top">
        <div class="absolute bottom-[100%] z-[1] w-full select-none" v-if="showMoreUserMenu">
          <nav class="bg-black rounded ">
            <div class="flex flex-col gap-2 text-sm text-gray-100 bg-black">
              <a @click="clear" class="flex items-center gap-4 px-3 py-3 text-sm transition-colors duration-200 cursor-pointer text-white/80 hover:bg-slate-800">
                <Icon size="20" class="text-slate-500">
                  <DeleteSweepOutlined />
                </Icon>
                {{$t('sideBar.clearChats')}}
              </a>
            </div>
            <div class="flex flex-col gap-2 text-sm text-gray-100 bg-black">
              <a @click="refresh" class="flex items-center gap-4 px-3 py-3 text-sm transition-colors duration-200 cursor-pointer text-white/80 hover:bg-slate-800">
                <Icon size="20" class="text-slate-500">
                  <RefreshOutlined />
                </Icon>
                {{$t('sideBar.refresh')}}
              </a>
            </div>
            <div class="flex flex-col gap-2 text-sm text-gray-100 bg-black">
              <a @click="changeLang(locale === 'zh' ? 'en' : 'zh')"
                class="flex items-center gap-4 px-3 py-3 text-sm transition-colors duration-200 cursor-pointer text-white/80 hover:bg-slate-800">
                <Icon size="20" class="text-slate-500">
                  <LanguageFilled />
                </Icon>
                {{langName}}
              </a>
            </div>
            <div class="flex flex-col gap-2 text-sm text-gray-100 bg-black">
              <a @click="loginout" class="flex items-center gap-4 px-3 py-3 text-sm transition-colors duration-200 cursor-pointer text-white/80 hover:bg-slate-800">
                <Icon size="20" class="text-slate-500">
                  <LogOutFilled />
                </Icon>
                {{$t('sideBar.logout')}}
              </a>
            </div>
          </nav>


        </div>
      </Transition>

    </div>


  </nav>
</template>



<style scoped>
  .slide-top-enter-active,
  .slide-top-leave-active {
    transition: transform .2s ease, opacity .2s ease;
  }

  .slide-top-enter-from,
  .slide-top-leave-to {
    transform: translateY(-10%);
    opacity: 0;
  }
</style>